<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="res/layui-v2.8.17/layui/css/layui.css">
    <style>
        .layui-table-body tbody>tr{
            height: 80px !important;
        }
    </style>
</head>
<body>
<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <b>品牌列表</b>
                </div>
                <div class="layui-card-body">
                    <!--动态数据表格渲染-->
                    <table id="tab" lay-filter="tabFilter"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--修改层-->
<div id="modifyLayer"  style="display: none">
    <form id="form1" class="layui-form" lay-filter="modifyForm" style="padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                    <i class="layui-icon layui-icon-upload"></i> 选择本地图片
                </button>
                <!--文件选择控件-->
                <input type="file" id="logoFile" name="imgLogo" style="display: none">
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="height: 80px">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" class="layui-input" lay-verify="required" lay-reqtext="品牌名不能为空" lay-vertype="tips" placeholder="请输入品牌名称">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" id="submitBtn" class="layui-btn layui-bg-blue" lay-submit lay-filter="submitBtn">确认修改</button>
        </div>
    </form>
</div>
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-bg-orange layui-btn-sm" lay-event="modify">
            <i class="layui-icon layui-icon-edit"></i>
            修改LOGO
        </button>
        <button class="layui-btn layui-bg-red layui-btn-sm" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除品牌
        </button>
    </div>
</script>

<script src="res/layui-v2.8.17/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','form'],function(){
        //获取table模块
        let table = layui.table;
        let $ = layui.$;
        let form = layui.form;

        table.render({
            elem:'#tab',    //设置需要绑定的元素（支持css选择器）
            url:'http://localhost/iov/brand/list', //服务端接收请求地址
            page: {
                limit:5,
                limits:[2,5,10,15,20]
            },  //开启分页
            cols:[[
                {type:'checkbox',width:50},
                {type:'numbers',title:"序号",width: 80},
                {field:'logo',width:120, title: "logo",templet:'<div><img src="{{d.logo}}" height="36px" alt="{{d.logo}}"></div>'},
                {field:'name',title: "品牌"},
                {title:'操作',templet:'#rowTools'}
            ]],
            parseData:function(res){
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.total, // 解析数据长度
                    "data": res.data.records // 解析数据列表
                }
            }
        })

        //绑定单元格事件
        table.on('tool(tabFilter)',function(obj){
            //获取事件名(lay-event属性值)
            let event = obj.event;
            if(event === 'modify'){
                //修改
                let html = $('#modifyLayer').html();
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 1, // page 层类型
                    area: ['450px', '360px'],
                    title: 'Hello layer',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 2, // 0-6 的动画形式，-1 不开启
                    content: html,
                    success:function(layero, index, that){
                        //表单赋值
                        form.val('modifyForm',obj.data);

                        $(layero).find('#ID-upload-demo-img').prop('src',obj.data.logo);
                    }
                });
            }else if(event === 'del'){
                //删除
                layer.confirm('确定删除该品牌吗',{icon:3},function(){

                })
            }
        })
    })
</script>
</body>
</html>